<template>
  <div v-loading="loading">
    <Ttitle
      class="title"
      @commit="commit"
      @NowTime="NowTime"
      :isJJ="isjiaojuan"
      :isdisabled="disabled"
      @commitPage="commitPage"
      :usererror="usererror"
      @timeCommit="timeCommit"
      :examTime="examTime"
    ></Ttitle>
    <div style="height: 50px"></div>
    <div class="big_box">
      <div class="big_box_left">
        <div style="height: calc(100% - 50px); overflow: auto">
          <div v-for="(ti, index) in TiType" :key="index + 1000000">
            <div style="padding: 0 24px; display: flex" v-if="ti.length != 0">
              <span class="TI_title"
                >{{ ti[0].sum }}、{{ ti[0].qtype }}题
                <span v-if="!jrType"
                  >（共{{
                    getExectSettingData.试题分布[ti[0].qtype].数量
                  }}题，每题{{
                    getExectSettingData.试题分布[ti[0].qtype].分数
                  }}分，说明：{{
                    ti[0].qtype != "多选"
                      ? "选择一项正确答案"
                      : "选择所有正确的答案"
                  }}）</span
                >
                <span
                  v-else
                  style="
                    flex: 1;
                    text-align: right;
                    color: #fa6400;
                    font-weight: 600;
                  "
                >
                  {{ ti.length }}
                </span>
              </span>
            </div>
            <div class="TI_number">
              <el-row>
                <el-col :span="4" v-for="item in ti" :key="item.tixu">
                  <div
                    class="TIClass"
                    @click="changeTi(item)"
                    :style="item.type"
                  >
                    {{ item.tixu }}
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
        </div>
        <!-- <div style="height:80px;width:100%">
         </div> -->
        <div class="Ti_foot" v-if="!disabled">
          <div class="tICade">
            <div class="TIClass" style="background: #eee"></div>
            <span>未答题</span>
          </div>
          <div class="tICade">
            <div class="TIClass" style="background: #f5a623"></div>
            <span>已答题</span>
          </div>
          <div class="tICade">
            <div class="TIClass" style="background: #175dff"></div>
            <span>当前题</span>
          </div>
        </div>
        <div class="Ti_foot" v-else>
          <div class="tICade">
            <div class="TIClass" style="background: #eee"></div>
            <span>未答题</span>
          </div>
          <div class="tICade">
            <div class="TIClass" style="background: #7ed321"></div>
            <span>正确题</span>
          </div>
          <div class="tICade">
            <div class="TIClass" style="background: #f33e34"></div>
            <span>错误题</span>
          </div>
        </div>
      </div>
      <div class="big_box_right">
        <div class="Ti_title">
          <span>{{ Current.qtype }}题</span>
        </div>
        <div class="Ti_content">
          <div class="Ti_Gan">
            <span style="display: inline-block; width: 98%"
              >{{ Current.name }}、{{ Current.stem }}</span
            >
            <div
              style="line-height: 150px; display: inline-block"
              v-if="Current.stem_img"
            >
              <img :src="Current.stem_img" style="100%;width:60%" alt="" />
            </div>
            <div
              class="Collection"
              @click="CollectionBoxClick"
              v-if="
                getExectSettingData.考试类型 == '模拟考试' &&
                (jrType == 'ctsj' || jrType == 'scsj'
                  ? jrType == 'scsj'
                    ? false
                    : !disabled
                  : usererror
                  ? !usererror
                  : !disabled)
              "
            >
              <i
                class="el-icon-star-on"
                v-if="isYes"
                @click="CollectionClick(Current)"
              ></i>
              <i
                class="el-icon-star-off"
                v-else
                @click="CollectionClick(Current)"
              ></i>
            </div>
          </div>
          <div>
            <el-radio-group
              v-model="daan"
              class="radio-group-box"
              @change="danChange(Current)"
              v-if="Current.qtype == '单选'"
              :disabled="disabled"
            >
              <div
                class="radio_box"
                v-for="(item, index) in Current.tiList"
                :key="index"
              >
                <el-radio
                  class="arrse"
                  :label="item.cred"
                  v-if="item.content_img"
                  >{{ item.cred }} <img :src="item.content_img" alt=""
                /></el-radio>
                <el-radio
                  class="arrse"
                  :label="item.cred"
                  v-else-if="item.content"
                  >{{ item.cred }} {{ item.content }}</el-radio
                >
              </div>
            </el-radio-group>
            <el-checkbox-group
              class="radio-group-box"
              v-if="Current.qtype == '多选'"
              v-model="checkList"
              @change="danChange(Current)"
              :disabled="disabled"
            >
              <div
                class="radio_box"
                v-for="(item, index) in Current.tiList"
                :key="index"
              >
                <el-checkbox :label="item.cred" v-if="item.content"
                  >{{ item.cred }} {{ item.content }}</el-checkbox
                >
              </div>
            </el-checkbox-group>
            <el-radio-group
              v-model="daan"
              class="radio-group-box"
              @change="danChange(Current)"
              v-if="Current.qtype == '判断'"
              :disabled="disabled"
            >
              <div class="radio_box">
                <el-radio label="正确">正确</el-radio>
              </div>
              <div class="radio_box">
                <el-radio label="错误">错误</el-radio>
              </div>
            </el-radio-group>
          </div>
          <div style="margin-top: 44px; padding: 0 8px">
            <el-button
              @click="changeClick('del')"
              style="margin-right: 30px"
              type="primary"
              :disabled="updisabled"
              >上一题</el-button
            >
            <el-button
              @click="changeClick('add')"
              style="margin-right: 60px"
              type="primary"
              :disabled="downdisabled"
              >下一题</el-button
            >
            <!-- <el-button type="warning" @click="goback">退出练习</el-button> -->
            <el-button
              type="primary"
              @click="commit"
              v-if="!disabled"
              style="margin-left: 30%"
              >交卷</el-button
            >
            <el-button
              type="primary"
              @click="goback"
              v-else
              style="margin-left: 30%"
              >退出</el-button
            >
          </div>
          <div class="daan_box" v-if="isDaAn">
            <span> 答案:{{ Current.answer }} </span>
            <p v-if="Current.analysis">解析:{{ Current.analysis }}</p>
          </div>
        </div>
      </div>
    </div>
    <el-dialog
      title="我的成绩"
      :visible="dialogVisible"
      width="30%"
      :show-close="false"
    >
      <div class="chengji">
        <el-progress
          type="circle"
          :percentage="fraction"
          :stroke-width="12"
          :format="text_progress"
          :width="150"
          :color="customColorMethod"
        >
        </el-progress>
        <div class="textStyle">
          <span :style="{ color: textColor }">{{ fraction }}</span>
          <p>考试得分</p>
        </div>
      </div>
      <ul class="ulbox">
        <li>
          <span style="color: #65bb06">{{ correct }}</span>
          <p>正确题数</p>
        </li>
        <li>
          <span style="color: #d0021b">{{ error }}</span>
          <p>错误题数</p>
        </li>
        <li>
          <span style="color: #666">{{ Unanswered }}</span>
          <p>未做题数</p>
        </li>
      </ul>
      <span slot="footer" class="dialog-footer">
        <el-button @click="errorlist">查看错题</el-button>
        <el-button @click="rewinding">复卷</el-button>
        <el-button type="primary" @click="goback">回到主页</el-button>
      </span>
      
    </el-dialog>
    <el-dialog
      title="签名"
      :visible="signshow"
      width="30%"
      :show-close="false"
      append-to-body
      v-loading="signloading"
    >
      <p style="font-size: 20px;font-weight: 600;text-align: center;">您已完成本科目培训所有内容，请签字确认!</p>
      <div style="width: 100%; display: flex; justify-content: center">
        <autograph ref="autograph"> </autograph>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="$refs.autograph.clear()">清除</el-button>
        <el-button type="primary" @click="uploadSing">提交签名</el-button>
      </span>
    </el-dialog>
    <div
      style="
        position: absolute;
        top: 0;
        right: 0;
        height: 100vh;
        width: 100vw;
        z-index: 100000000;
      "
      v-if="disFace"
    >
      <face :comments="true" :show.sync="disFace" type="zsface"></face>
    </div>
  </div>
</template>

<script>
import autograph from "@/components/autograph";
import Ttitle from "./title.vue";
import {
  examAdd,
  mockcancelcollect,
  mockcollect,
  resetwrongAdd,
  zujuandoneexam,
  updateApply
} from "@/api/admin.js";
import { getTi, delTi, getExectSetting, getapplyid,getcurrentInfo } from "@/utils/auth.js";
import { mapGetters } from "vuex";
import face from "@/components/PcFace";
import { upFileqm } from "@/utils/upFiel";
export default {
  data() {
    return {
      titleName: this.$route.query.titleName, //模拟考试 or 正式考试
      examTime: this.$route.query.examTime,
      //#175DFF  当前
      Tistyle: {
        background: "#eee",
        color: "#000",
      }, //未答题样式
      DQTistyle: {
        background: "#175DFF",
        color: "#FFF",
      }, //当前题样式
      YDTistyle: {
        background: "#F5A623",
        color: "#FFF",
      }, //已答题题样式
      DCTistyle: {
        background: "#F33E34",
        color: "#FFF",
      }, //答错题样式
      DDTistyle: {
        background: "#7ED321",
        color: "#FFF",
      }, //答对题样式
      DQTI: {}, //当前题信息
      TIXU: 1, //题序
      daan: "", //答题  单选
      Current: {
        //当前题展示在页面
        name: "1",
        stem: "",
        tiList: [],
        answer: "",
        analysis: "",
        id: "",
        qtype: "",
      },
      updisabled: true, //上一题 禁用标识
      downdisabled: false, //下一题禁用标识
      commitData: [], //用户答案  提交时传给后台
      isDaAn: false, //是否显示答案  默认不显示 在答题后显示
      Ti: getTi(), //所有试题
      examid: this.$route.query.examid, //试卷id  唯一
      gz: this.$route.query.gz,
      checkList: [], //多选的vuelue
      isYes: false, //默认不收藏
      Collectionlist: [], //收藏得全部试题
      subjectid: this.$route.query.subjectid, //专业id
      DXTi: [], //单选题
      MOTi: [], //单选题
      PDTi: [], //判断题
      TiType: [], //试题题型 单选题  单选题  判断题
      getExectSettingData: JSON.parse(getExectSetting()), //取出考试配置
      dialogVisible: false, //隐藏弹出框
      textColor: "#1677FF", //进度条 文字颜色
      correct: 0, //正确题数
      error: 0, //错误题数
      Unanswered: 0, //未答题数
      fraction: 0, //最终得分
      loading: false, //等待
      isjiaojuan: true, //如果已经交卷  则为fales
      disabled: false, //复卷时禁用答题按钮
      time: 0, //当前时间

      jrType: this.$route.query.jrType, //进入方式  错题库  ctsj  收藏  scsj
      usererror: this.$route.query.usererror, //进入方式  首页错题库  收藏

      rengong: this.$route.query.rengong, //是否是人工组卷

      facetimeObj: Object,
      disFace: false,
      signshow:false,
      nullSign:'',
      signloading:false,
    };
  },
  components: {
    Ttitle,
    face,
    autograph,
  },
  watch:{
      disFace(val){
        if(!val){
          this.facetimeObj = this.faceTimeOut()
        }
      },
      dialogVisible(val){
        if(val){
          this.signshow=false
          this.nullSign = ''
          if(!this.qyType('hailiwei')){
            if(JSON.parse(getcurrentInfo()).exam_type=='初培'){
              if(this.fraction>=80){
                this.signshow=true
                this.$nextTick(()=>{
                  this.nullSign = this.$refs.autograph.commit()
                })
              }
            }else{
              if(this.fraction>=70){
                this.signshow=true
                this.$nextTick(()=>{
                  this.nullSign = this.$refs.autograph.commit()
                })
              }
            }
          }
        }
      }
  },
  computed: {
    qtype: function () {
      return this.Ti[0].qtype;
    },
    ...mapGetters(["initObj"]),
  },
  created() {
    this.isDaAn = this.$route.query.daan == "显示"; //显示答案
    if (
      this.initObj.is_face &&
      JSON.parse(this.initObj.is_face)[this.gz].zsface == "开启" &&
      JSON.parse(this.initObj.is_face)[this.gz].zsfacetime
    ) {
      if (
        navigator.getUserMedia ||
        (navigator.mediaDevices && navigator.mediaDevices.getUserMedia)
      ) {
        this.facetimeObj = this.faceTimeOut()
        //
      } else {
        this.$alert("该电脑没有摄像头，无法使用该模块", "提示", {
          confirmButtonText: "确定",
          callback: () => {
            this.$router.go(-1);
          },
        });
      }
    }
    this.Ti.map((item, index) => {
      item.name = index + 1; //加入题序
      if (item.uanswer) {
        this.commitData.push({
          questionid: item.id,
          uanswer: item.uanswer,
          scored: item.scored,
        });
        this.TIXU = item.name;
      }
      if (item.qtype == "单选") {
        this.DXTi.push(item);
      }
      if (item.qtype == "多选") {
        this.MOTi.push(item);
      }
      if (item.qtype == "判断") {
        this.PDTi.push(item);
      }
    });
    let A = true;
    let B = true;
    let C = true;
    if (this.DXTi.length != 0) {
      this.DXTi.map((item, index) => {
        item.tixu = index + 1;
      });
    } else {
      A = false;
    }
    if (this.MOTi.length != 0) {
      this.MOTi.map((item, index) => {
        item.tixu = this.DXTi.length + index + 1;
      });
    } else {
      B = false;
    }
    if (this.PDTi.length != 0) {
      this.PDTi.map((item, index) => {
        item.tixu = this.DXTi.length + this.MOTi.length + index + 1;
      });
    } else {
      C = false;
    }
    this.TiType.push(this.DXTi, this.MOTi, this.PDTi);
    let sum = 1;
    this.TiType.map((item) => {
      if (item.length != 0) {
        item[0].sum = sum++;
      }
    });
    if (this.gz == "fj") {
      this.rewinding();
    }
    if (A) {
      this.DQTI = this.TiType[0][0];
    } else if (B) {
      this.DQTI = this.TiType[1][0];
    } else if (C) {
      this.DQTI = this.TiType[2][0];
    }
    this.Current.qtype = this.DQTI.qtype;
    this.styleChange(this.DQTI.tixu);
    document.addEventListener("keydown", this.returnF5Code);
  },
  methods: {
    //提交签名
    uploadSing(){
      if(this.nullSign==this.$refs.autograph.commit()){
        return this.$message.error('请签名后提交')
      }
      this.signloading=true
      upFileqm(this.$refs.autograph.commit(), this.titleName, {
        field: "signature",
      }).then(res=>{
        if (res.code == 200) {
          // res.data.url
          updateApply({
            applyid:getapplyid(),
            signature:res.data.url
          }).then((res) => {
            this.signloading=false
            if (res.code == 200) {
              this.signshow=false
              this.$message.success('提交成功');
            } else {
              this.$message.error(res.msg);
            }
          });
        }else{
          this.signloading=false
        }
      })
    },
    //启动人脸倒计时
    faceTimeOut(){
      return setTimeout(() => {
          this.disFace = true;
          clearTimeout(this.facetimeObj)
        }, JSON.parse(this.initObj.is_face)[this.gz].zsfacetime * 60 * 1000);
        //
    },
    //样式切换
    styleChange(val) {
      this.styleMap();
      if (this.Current.qtype == "单选") {
        this.DXTi.map((item) => {
          // item.type=this.Tistyle
          if (Number(item.tixu) == val) {
            item.type = this.DQTistyle;
            this.DQTI = item;
            this.funChangeTi(item);
          }
        });
      }
      if (this.Current.qtype == "多选") {
        this.MOTi.map((item) => {
          if (Number(item.tixu) == val) {
            item.type = this.DQTistyle;
            this.DQTI = item;
            this.funChangeTi(item);
          }
        });
      }
      if (this.Current.qtype == "判断") {
        this.PDTi.map((item) => {
          if (Number(item.tixu) == val) {
            item.type = this.DQTistyle;
            this.DQTI = item;
            this.funChangeTi(item);
          }
        });
      }
    },
    //默认样式改变
    styleMap() {
      this.Ti.map((item) => {
        item.type = this.Tistyle;
        this.commitData.map((element) => {
          if (item.id == element.questionid) {
            if (!this.disabled) {
              item.type = this.YDTistyle;
            } else {
              if (item.id == element.questionid) {
                if (Boolean(element.scored)) {
                  item.type = this.DDTistyle;
                } else {
                  item.type = this.DCTistyle;
                }
              } else {
                item.type = this.DQTistyle;
              }
            }
          }
        });
      });
    },
    //点击题号切换试题
    changeTi(item) {
      this.Current.qtype = item.qtype;
      this.DQTI = item;
      this.TIXU = item.tixu;
      // this.styleChange(item.tixu);
      this.funChangeTi(item);
      this.changeClick();
      this.$forceUpdate();
    },
    //按钮切换试题
    changeClick(data) {
      this.updisabled = false;
      this.downdisabled = false;

      if (!this.downdisabled && data == "add") {
        this.TIXU = Number(this.DQTI.tixu) + 1;
      }
      if (!this.updisabled && data == "del") {
        this.TIXU = Number(this.DQTI.tixu) - 1;
      }
      // if (
      //   this.Current.qtype == "单选" &&
      //   this.DXTi.length == Number(this.TIXU)
      // ) {
      //   this.downdisabled = true;
      // }
      // if (
      //   this.Current.qtype == "多选" &&
      //   this.MOTi.length == Number(this.TIXU)
      // ) {
      //   this.downdisabled = true;
      // }
      // if (
      //   this.Current.qtype == "判断" &&
      //   this.PDTi.length == Number(this.TIXU)
      // ) {
      //   this.downdisabled = true;
      // }
      if (Number(this.TIXU) == this.Ti.length) {
        this.downdisabled = true;
        this.updisabled = false;
      }
      if (Number(this.TIXU) == 1) {
        this.updisabled = true;
        this.downdisabled = false;
      }
      this.styleChange(this.TIXU);
      this.$forceUpdate();
    },
    //试题信息  切换试题时  触发此函数
    funChangeTi(item) {
      let Arr = [];
      Arr.push(
        {
          cred: "A",
          content: item.a,
          content_img: item.a_img,
        },
        {
          cred: "B",
          content: item.b,
          content_img: item.b_img,
        },
        {
          cred: "C",
          content: item.c,
          content_img: item.c_img,
        },
        {
          cred: "D",
          content: item.d,
          content_img: item.d_img,
        },
        {
          cred: "E",
          content: item.e,
          content_img: item.e_img,
        },
        {
          cred: "F",
          content: item.f,
          content_img: item.f_img,
        }
      );
      this.Current = {
        name: item.tixu,
        stem: item.stem,
        tiList: Arr,
        answer: item.answer,
        analysis: item.analysis,
        id: item.id,
        qtype: item.qtype,
        stem_img: item.stem_img,
      };
      //每次切换试题都要重新填写用户相对应的答案
      this.daan = "";
      this.checkList = [];
      // this.isDaAn=false
      this.commitData.map((ite) => {
        if (ite.questionid == item.id) {
          this.daan = ite.uanswer;
          this.checkList = ite.uanswer.split("");
          // this.isDaAn=true
        }
      });
      this.isYes = false;
      this.Collectionlist.map((itemA) => {
        if (itemA.questionid == item.id) {
          this.isYes = true;
        }
      });
    },
    NowTime(data) {
      this.time = data;
    },
    //退出
    goback() {
      this.$router.go(-1);
    },
    //答题时 单选
    danChange(data) {
      if (data.qtype == "多选") {
        this.daan = this.checkList.sort().join("");
      }
      let scored; //是否正确   对 1 错 0
      if (data.qtype == "判断") {
        if (data.answer == this.daan) {
          scored = 1;
        } else {
          scored = 0;
        }
      } else {
        if (data.answer.split("").sort().join("") == this.daan) {
          scored = 1;
        } else {
          scored = 0;
        }
      }
      var isyes = false;
      this.commitData.map((item) => {
        if (this.commitData.length == 0 || item.questionid == data.id) {
          isyes = true;
          item.uanswer = this.daan;
          item.scored = scored;
          item.qtype = data.qtype;
        }
      });
      if (!isyes) {
        this.commitData.push({
          questionid: data.id,
          uanswer: this.daan,
          scored,
          qtype: data.qtype,
        });
        // this.isDaAn = true
      }
    },
    //阻止按键刷新
    returnF5Code(e) {
      var evt = window.event || e;
      var code = evt.keyCode || evt.which;
      if (code > 111 && code < 123) {
        if (evt.preventDefault) {
          evt.preventDefault();
        } else {
          evt.keyCode = 0;
          evt.returnValue = false;
        }
      }
    },
    //计算试题得分
    jsdf() {
      this.correct = 0;
      this.error = 0;
      let Dfen = 0; //单选做对题数
      let Pfen = 0; //判断做对题数
      let Mfen = 0; //多选做对题数
      this.commitData.map((item) => {
        if (Boolean(item.scored)) {
          this.correct++;
          if (item.uanswer == "正确" || item.uanswer == "错误") {
            Pfen++;
          } else if (item.uanswer.length > 1) {
            Mfen++;
          } else {
            Dfen++;
          }
        } else {
          this.error++;
        }
      });
      let Dfens = 0;
      let Mfens = 0;
      let Pfens = 0;
      Dfens = Dfen * this.getExectSettingData.试题分布.单选.分数; //单选得分
      Mfens = Mfen * this.getExectSettingData.试题分布.多选.分数; //多选得分
      Pfens = Pfen * this.getExectSettingData.试题分布.判断.分数; //判断得分
      this.fraction = Dfens + Mfens + Pfens; //总分
      this.Unanswered = this.Ti.length - this.commitData.length; //未作题
    },
    //交卷函数
    jjFunction(data) {
      let obj = {
        examid: this.examid,
        gz: this.gz,
      };
      // this.correct = 0;
      // this.error = 0;
      // let Dfen = 0; //单选做对题数
      // let Pfen = 0; //判断做对题数
      // let Mfen = 0; //多选做对题数
      // this.commitData.map((item) => {
      //   if (Boolean(item.scored)) {
      //     this.correct++;
      //     if (item.uanswer == "正确" || item.uanswer == "错误") {
      //       Pfen++;
      //     } else if (item.uanswer.length > 1) {
      //       Mfen++;
      //     } else {
      //       Dfen++;
      //     }
      //   } else {
      //     this.error++;
      //   }
      // });
      // let Dfens = 0;
      // let Mfens = 0;
      // let Pfens = 0;
      // Dfens = Dfen * this.getExectSettingData.试题分布.单选.分数; //单选得分
      // Mfens = Mfen * this.getExectSettingData.试题分布.多选.分数; //多选得分
      // Pfens = Pfen * this.getExectSettingData.试题分布.判断.分数; //判断得分
      // this.fraction = Dfens + Mfens + Pfens; //总分
      // this.Unanswered = this.Ti.length - this.commitData.length; //未作题
      this.$forceUpdate();
      if (this.commitData.length > 0) {
        this.loading = true;
        if (this.usererror) {
          if (this.usererror == "错题集") {
            resetwrong({
              subjectid: this.subjectid,
              qlist: JSON.stringify(this.commitData),
            }).then((res) => {
              this.loading = false;
              if (res.code == 200) {
                this.isjiaojuan = false;
                this.dialogVisible = true;
                this.Unanswered = res.data.undo;
                this.correct = res.data.done - res.data.wrong;
                this.error = res.data.wrong;
                this.fraction = res.data.score;
              }
            });
          } else {
            this.isjiaojuan = false;
            this.dialogVisible = true;
            this.jsdf();
          }
        } else {
          if (this.jrType && this.jrType == "ctsj") {
            resetwrongAdd({
              subjectid: this.subjectid,
              qlist: JSON.stringify(this.commitData),
              applyid: getapplyid(),
            }).then((res) => {
              this.loading = false;
              if (res.code == 200) {
                this.isjiaojuan = false;
                this.dialogVisible = true;
                this.Unanswered = res.data.undo;
                this.correct = res.data.done - res.data.wrong;
                this.error = res.data.wrong;
                this.fraction = res.data.score;
              }
            });
          } else {
            if (this.rengong != "1") {
              examAdd(obj, {
                examlog: JSON.stringify(this.commitData),
                use_time: data,
                scheme_id: this.$route.query.scheme_id
                  ? this.$route.query.scheme_id
                  : 0,
              }).then((res) => {
                this.loading = false;
                if (res.code == 200) {
                  this.isjiaojuan = false;
                  this.Unanswered = res.data.undo;
                  this.correct = res.data.done - res.data.wrong;
                  this.error = res.data.wrong;
                  this.fraction = res.data.score;
                  this.dialogVisible = true;
                }
              });
            } else {
              zujuandoneexam({
                examid: this.examid,
                examlog: JSON.stringify(this.commitData),
                use_time: data,
              }).then((res) => {
                this.loading = false;
                if (res.code == 200) {
                  this.isjiaojuan = false;
                  this.dialogVisible = true;
                  this.Unanswered = res.data.undo;
                  this.correct = res.data.done - res.data.wrong;
                  this.error = res.data.wrong;
                  this.fraction = res.data.score;
                }
              });
            }
          }
        }
      } else {
        this.isjiaojuan = false;
        this.dialogVisible = true;
        this.jsdf();
      }
    },
    //commit 答题记录
    commit() {
      this.$confirm("确定交卷？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        showClose: false,
      })
        .then(() => {
          this.jjFunction(this.time);
        })
        .catch(() => {});
    },
    //退出当前页面 提交答题记录
    commitPage(data) {
      if (this.commitData.length > 0) {
        let obj = {
          examid: this.examid,
          gz: this.gz,
        };
        if (this.rengong != "1") {
          examAdd(obj, {
            examlog: JSON.stringify(this.commitData),
            use_time: data,
          }).then((res) => {});
        } else {
          zujuandoneexam({
            examid: this.examid,
            examlog: JSON.stringify(this.commitData),
            use_time: data,
          }).then((res) => {});
        }
      }
    },
    //时间到  提交答题记录
    timeCommit(data) {
      this.$message.success("时间到，将自动提交试卷");
      this.jjFunction(data);
    },
    //收藏 取消收藏
    CollectionClick(data) {
      var isyes = false;
      this.Collectionlist.map((item, index) => {
        if (this.Collectionlist.length == 0 || item.questionid == data.id) {
          isyes = true;
          delete this.Collectionlist[index];
          mockcancelcollect({
            subjectid: this.subjectid,
            questionid: data.id,
            applyid: getapplyid(),
          }).then((res) => {
            if (res.code == 200) {
              this.$message.success("取消成功");
            } else {
              this.$$message.error(res.msg);
            }
          });
        }
      });
      if (!isyes) {
        this.Collectionlist.push({ questionid: data.id, isYes: true });
        mockcollect({
          subjectid: this.subjectid,
          questionid: data.id,
          applyid: getapplyid(),
        }).then((res) => {
          if (res.code == 200) {
            this.$message.success("收藏成功");
          } else {
            this.$$message.error(res.msg);
          }
        });
      }
    },
    //收藏控制器
    CollectionBoxClick() {
      this.isYes = !this.isYes;
    },
    //环形进度条 内置文字
    text_progress(percentage) {},
    //环形进度条 颜色调整
    customColorMethod(percentage) {
      if (percentage <= 50) {
        this.textColor = "#f56c6c";
        return "#f56c6c";
      } else if (percentage <= 80) {
        this.textColor = "#e6a23c";
        return "#e6a23c";
      } else {
        this.textColor = "#409eff";
        return "#409eff";
      }
    },
    //复卷
    rewinding() {
      this.dialogVisible = false;
      this.disabled = true;
      this.isDaAn = true;
      this.isjiaojuan = false;
      // this.styleMap()
      this.styleChange(this.TiType[0][0].tixu);
    },
    //查看错题
    errorlist() {
      if (this.commitData.length == 0) {
        return this.$message.error("没有错题");
      }

      let DXTi = [];
      let MOTi = [];
      let PDTi = [];
      this.commitData
        .filter((item) => {
          return !Boolean(item.scored);
        })
        .map((item, index) => {
          this.Ti.map((it) => {
            if (it.id == item.questionid) {
              // it.tixu = index+1 //加入题序
              if (it.qtype == "单选") {
                DXTi.push(it);
              }
              if (it.qtype == "多选") {
                MOTi.push(it);
              }
              if (it.qtype == "判断") {
                PDTi.push(it);
              }
            }
          });
        });
      let A = true;
      let B = true;
      let C = true;
      if (DXTi.length != 0) {
        DXTi.map((item, index) => {
          item.tixu = index + 1;
        });
      } else {
        A = false;
      }
      if (MOTi.length != 0) {
        MOTi.map((item, index) => {
          item.tixu = index + 1;
        });
      } else {
        B = false;
      }
      if (PDTi.length != 0) {
        PDTi.map((item, index) => {
          item.tixu = index + 1;
        });
      } else {
        C = false;
      }
      if (PDTi.length == 0 && MOTi.length == 0 && DXTi.length == 0) {
        return this.$message.error("没有错题");
      }
      this.DXTi = DXTi;
      this.MOTi = MOTi;
      this.PDTi = PDTi;
      this.TiType = [];
      this.TiType.push(this.DXTi, this.MOTi, this.PDTi);
      let sum = 1;
      this.TiType.map((item) => {
        if (item.length != 0) {
          item[0].sum = sum++;
        }
      });
      this.dialogVisible = false;
      this.disabled = true;
      this.isDaAn = true;
      this.isjiaojuan = false;
      // this.styleMap()
      if (A) {
        this.styleChange(this.TiType[0][0].tixu);
      } else if (B) {
        this.styleChange(this.TiType[1][0].tixu);
      } else if (C) {
        this.styleChange(this.TiType[2][0].tixu);
      }
    },
  },
  beforeDestroy() {
    // this.commit(this.commitData)
    document.removeEventListener("keydown", this.returnF5Code);
  },
};
</script>

<style lang="scss" scoped>
.big_box {
  width: 100%;
  height: calc(100vh - 50px);
  min-height: 680px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f4f5f8;
  padding: 24px;
  // margin-top:50px;
  .big_box_left {
    width: 370px;
    height: 100%;
    background: #fff;
    padding: 24px 0;
    position: relative;
    // overflow: auto;
    .TI_title {
      font-weight: 600;
      display: inline-block;
      // width: 50px;
      span {
        font-weight: 400;
      }
    }
    .Ti_foot {
      position: absolute;
      bottom: 0;
      height: 80px;
      width: 100%;
      padding: 0 24px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .tICade {
        display: flex;
        align-items: center;
      }
      .TIClass {
        width: 24px;
        height: 24px;
        margin-right: 4px;
      }
    }
  }
  .big_box_right {
    flex: 1;
    height: 100%;
    background: #fff;
    margin-left: 24px;
    .Ti_title {
      width: 100%;
      display: flex;
      justify-content: center;
      span {
        display: flex;
        padding: 24px;
        font-size: 16px;
        font-weight: 600;
      }
    }
    .Ti_content {
      // width: 100%;
      padding: 0 50px;
      font-size: 26px;
      .Ti_Gan {
        margin-bottom: 32px;
        position: relative;
        .Collection {
          position: absolute;
          top: 0;
          right: 0;
          cursor: pointer;
          .el-icon-star-on:before {
            color: #f5a623;
          }
        }
      }
      .radio-group-box {
        padding: 0 20px;
      }
      .radio_box {
        font-size: 20px;
        padding-bottom: 16px;
        ::v-deep {
          .arrse {
            width: 65vw;
            .el-radio__label,
            .el-checkbox__label {
              font-size: 20px;
              word-break: break-all !important;
              white-space: normal !important;
            }
          }

          .el-radio__inner {
            width: 20px;
            height: 20px;
            &::after {
              width: 8px;
              height: 8px;
            }
          }
          .el-checkbox__inner {
            width: 20px;
            height: 20px;
            &::after {
              width: 5px;
              height: 9px;
              left: 6px;
            }
          }
          .el-radio__input {
            margin-top: -5px;
          }
        }
      }
      .daan_box {
        margin-top: 50px;
        padding: 20px 36px;
        background: #eeeeee;
        span {
          font-size: 18px;
        }
        p {
          margin: 0;
          font-size: 18px;
        }
      }
    }
  }
}
.button_color {
  background: #eee;
  // color:#fff;
}
.TI_number {
  padding: 0 24px;
  padding-top: 10px;
  // overflow: hidden;
  // max-height:calc(100% - 100px);
  .TIClass {
    width: 40px;
    height: 40px;
    background: #eee;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 14px;
    cursor: pointer;
  }
}
::v-deep {
  :root {
    min-height: 680px;
  }
  .el-radio__input.is-disabled + span.el-radio__label {
    color: #333;
  }
  .el-radio__input.is-disabled .el-radio__inner {
    border-color: #dcdfe6;
    background-color: #ffffff;
    &::after {
      background-color: #ffffff;
    }
  }
  .el-radio__input.is-disabled.is-checked .el-radio__inner {
    background-color: #1890ff;
    border-color: #1890ff;
  }
}
.chengji {
  width: 100%;
  display: flex;
  justify-content: center;
  position: relative;
  .textStyle {
    height: 150px;
    width: 150px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    span {
      color: #1677ff;
      font-size: 36px;
    }
    p {
      color: #999999;
      font-size: 14px;
    }
  }
}
.ulbox {
  padding: 30px 57px 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #eee;
  li {
    text-align: center;
    line-height: 34px;
    span {
      font-size: 18px;
    }
    p {
      font-size: 18px;
      color: #999;
    }
  }
}
</style>